{% set product_attributes = hookable_metadata.context.product_attributes %}

<div class="col-12 col-sm-4">
    <div class="border-end">
        <div id="product_attribute_tabs" class="list-group list-group-flush" role="tablist">
            {% for product_attribute_code, product_attribute_value in product_attributes %}
                {% set product_attribute_name = (product_attribute_value|first).vars.data.name %}
                <div
                    class="py-2 cursor-pointer list-group-item list-group-item-action {% if loop.first %}active{% endif %}"
                    {{ stimulus_target('@sylius/admin-bundle/tabs-errors', 'tab') }}
                    data-bs-toggle="tab"
                    data-bs-target="#{{ product_attribute_code }}"
                    aria-selected="{{ loop.first ? 'true' : 'false' }}"
                    role="tab"
                    {{ sylius_test_html_attribute('attribute-tab', product_attribute_name) }}
                >
                    <div class="d-flex justify-content-between align-items-center">
                        {% hook 'item' with { product_attribute_name, product_attribute_code } %}
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
</div>
